<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <div class="btns">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="form">
          <el-form-item label="">
            <el-cascader
              v-model="searchForm.companyId"
              placeholder="请选择公司名称"
              :options="companyArray"
              :popper-append-to-body="false"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childList',
              }"
              @change="changeTreeItem"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" :popper-append-to-body="false" clearable>
              <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button class="el-icon-s-home" @click="back()"></el-button>
      </div>
      <div class="top-content">
        <div class="row-control" v-for="(item, index1) in groupUnitsData" :key="item.id">
          <div class="item-control" v-for="itema in item.list" :key="itema.id + 'a'">
            <div class="filter-box" @click="handleType(itema.id, itema.status)">
              <div class="status ty" v-if="itema.status == 0">停用</div>
              <div class="status gl" v-if="itema.status == 1">过滤</div>
              <div class="status dd" v-if="itema.status == 2">等待中</div>
              <div class="status cx" v-if="itema.status == 3">冲洗中</div>
              <div class="status gz" v-if="itema.status == 5">故障</div>
            </div>
            <div class="filter-name">
              <img class="guzhang" v-if="itema.status == 5" src="../../../assets/filtration/guzhang.png" alt="" />
              {{ item.orderNum }}-{{ itema.orderNum }}
            </div>
          </div>
          <div class="row-title">{{ item.name }}</div>
        </div>
      </div>
      <div class="bottom-content">
        <div class="left">
          <div v-for="(item, index) in queueData" :key="index">
            <div class="queue">
              <div class="queue-name">队列情况：</div>
              <div class="queue-box">
                <div class="queue-item" v-for="(itema, index2) in item.list" :key="index2 + 'b'">
                  {{ itema.orderNum }}
                  <div class="tip" v-if="itema.status == 0">停用</div>
                  <div class="tip" v-if="itema.status == 1">过滤</div>
                  <div class="tip" v-if="itema.status == 2">等待中</div>
                  <div class="tip" v-if="itema.status == 3">冲洗中</div>
                  <div class="tip" v-if="itema.status == 5">故障</div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div v-for="(item, index) in queueData" :key="item.id">
            <div class="time">
              <img class="clock" src="../../../assets/filtration/shijian.png" alt="" />
              <div class="ti">{{ item.time }}</div>
            </div>
          </div>
        </div>
        <div class="right" @click="handleHistory">
          <div class="right-name">历史数据</div>
        </div>
        <div class="right" @click="handleMore">
          <div class="right-name">更多状态</div>
        </div>
      </div>
    </div>
    <Operation :operationId="operationId" :operationStatus="operationStatus" :operationIsDialog="operationIsDialog"></Operation>
  </div>
</template>
<script>
import { isFullscreen } from "@/utils/fullscreen";
import Operation from "./components/operation.vue";
import { getControlDeviceGroupUnits, getControlDevices } from "@/api/filtration";
import { getCompanyInfoTree } from "@/api/company";
import { getSysCompanyBases } from "@/api/system";
export default {
  components: {
    Operation,
  },
  data() {
    return {
      // 查询字段
      searchForm: {
        userType: "",
        companyId: "",
        baseId: "",
      },
      companyArray: [],
      baseArray: [],
      operationId: "", // 操作id
      operationStatus: 0,
      operationIsDialog: false,
      iFullScreen: true,
      groupUnitsData: [], // 控制单元
      queueData: [], // 队列
      timer: null, // 定时器名称
    };
  },
  mounted() {
    this.userType = Number(window.localStorage.getItem("userType"));
    this.searchForm.userType = this.userType;
    this.getCompanyInfoTree();
    
    // if (!isFullscreen()) {
    //   let ele = document.body;
    //   if (ele.requestFullscreen) {
    //     ele.requestFullscreen();
    //   } else if (ele.mozRequestFullScreen) {
    //     ele.mozRequestFullScreen();
    //   } else if (ele.webkitRequestFullscreen) {
    //     ele.webkitRequestFullscreen();
    //   } else if (ele.msRequestFullscreen) {
    //     ele.msRequestFullscreen();
    //   }
    // }
  },
  // 销毁钩子
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/workbench/workbench`,
      });
    },
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return;
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: "总公司",
            parentId: 0,
          },
        ];
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data;
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id;
              this.getSysCompanyBases();
            }
          }
        });
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1];
      } else {
        this.searchForm.companyId = "";
      }

      this.searchForm.baseId = "";
      this.baseArray = [];

      // 获取基地列表
      this.getSysCompanyBases();
    },
    getSysCompanyBases() {
      if (this.searchForm.companyId === "" || this.searchForm.companyId == null) {
        return;
      }

      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data;
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id;
            this.getControlDeviceGroupUnits();
            this.getControlDevices();

            // 实时更新
            this.timer = setInterval(() => {
              this.getControlDeviceGroupUnits();
              this.getControlDevices();
            }, 10000);
          }
        }
      });
    },
    // 获取控制单元列表
    getControlDeviceGroupUnits() {
      getControlDeviceGroupUnits({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.groupUnitsData = res.data;
        }
      });
    },
    // 获取队列情况列表
    getControlDevices() {
      getControlDevices({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.queueData = res.data;
        }
      });
    },
    // 操作
    handleType(id, status) {
      if (status === 5) {
        return;
      }
      this.operationId = id + "";
      this.operationIsDialog = true;
      if (status != 3) {
        this.operationStatus = status;
      } else {
        this.operationStatus = status - 1;
      }
    },
    // 弹窗关闭
    closeAddEdit() {
      this.operationIsDialog = false;
    },
    // 历史数据
    handleHistory() {
      this.$router.push({
        path: `/filtration/history?id=` + this.searchForm.baseId,
      });
    },
    // 更多状态
    handleMore() {
      this.$router.push({
        path: `/filtration/more?id=` + this.searchForm.baseId,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .btns {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border: 1px solid red;
      /deep/.el-button {
        font-size: 2.5rem;
      }
      .form {
        /deep/.el-form-item__content {
          width: 22rem;
        }
        /deep/.el-form-item {
          margin-bottom: 0;
        }
        /* selecte 框的高度设置，默认是 40px*/
        /deep/ .el-input__inner {
          height: 4.5rem;
          width: 22rem;
          font-size: 1.86rem;
          // padding-left: 2rem;
        }
        ::v-deep .el-select-dropdown__empty {
          padding: 0.814286rem 3.3rem;
          font-size: 2.2rem;
        }
        ::v-deep .el-select-dropdown__list {
          padding: 1.428571rem 2.5rem;
          .el-select-dropdown__item {
            font-size: 2rem !important;
            padding: 3 5.428571rem !important;
          }
        }
      }
    }
    .top-content {
      display: flex;
      width: 90%;
      height: 45.5rem;
      //   margin-top:1rem;
      color: white;
      justify-content: space-between;
      .row-control {
        .item-control {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 1.4rem;
          .filter-box {
            width: 7rem;
            height: 7rem;
            background: #dedede;
            border-radius: 0.31rem;
            position: relative;
            margin-bottom: 0.5rem;
            cursor: pointer;
            .status {
              width: 6rem;
              height: 6rem;
              position: absolute;
              left: 0.5rem;
              top: 0.5rem;
              border-radius: 0.24rem;
              text-align: center;
              line-height: 6rem;
              font-size: 1.56rem;
            }
            .ty {
              background: gray;
            }
            .gl {
              background: #1fe005;
            }
            .gz {
              background: #f75959;
            }
            .cx {
              background: #1081b3;
            }
            .dd {
              background: #e9a908;
            }
          }
          .filter-name {
            width: 6rem;
            font-size: 1.46rem;
            text-align: center;
            position: relative;
            .guzhang {
              position: absolute;
              top: 10%;
              left: -5%;
            }
          }
        }
        .row-title {
          font-size: 1.76rem;
          font-weight: bold;
        }
      }
    }
    .bottom-content {
      width: 90%;
      height: 8.93rem;
      // border: 1px solid red;
      margin-top: 1.8rem;
      display: flex;
      justify-content: space-between;
      .left {
        width: 80.24%;
        height: 8.93rem;
        background: #00488b;
        border-radius: 0.29rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .queue {
          width: 100%;
          height: 5.53rem;
          // border: 1px solid red;
          color: white;
          font-size: 1.56rem;
          display: flex;
          align-items: flex-end;
          // .queue-name{
          //   width: 17%;
          // }
          .queue-box {
            height: 1.66rem;
            width: 42.79rem;
            // border: 1px solid red;
            line-height: 1.66rem;
            display: flex;
            justify-content: space-around;
            .queue-item {
              width: 2.6rem;
              text-align: center;
              position: relative;
              // border: 1px solid red;
              .tip {
                width: 5rem;
                height: 2.8rem;
                text-align: center;
                line-height: 2.3rem;
                font-size: 1.39rem;
                position: absolute;
                top: -210%;
                left: -40%;
                background-image: url(../../../assets/filtration/tip.png);
                background-position: center center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
              }
            }
          }
        }
        .line {
          width: 0.17rem;
          height: 7.53rem;
          background: #ffffff;
          opacity: 0.69;
        }
        .time {
          color: white;
          font-size: 1.56rem;
          display: flex;
          .clock {
            width: 1.56rem;
            height: 1.56rem;
            margin-right: 0.8rem;
            margin-top: 0.25rem;
          }
          .ti {
          }
        }
      }
      .right {
        width: 9.57rem;
        height: 8.93rem;
        background: #ffffff;
        border-radius: 0.24rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .right-name {
          width: 92%;
          height: 8rem;
          background: #ffffff;
          border-radius: 0.24rem;
          border: 0.04rem solid #d6d6d6;
          text-align: center;
          line-height: 8rem;
          font-size: 1.76rem;
        }
      }
    }
  }
}
</style>
